<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas-小黑板</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        background-color: #304452;
      }

      .contaner {
        width: 800px;
        height: 600px;
        position: absolute;
        margin: auto;
        inset: 0;
      }

      .controller {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 20px;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
      }

      #canvas {
        cursor: crosshair;
      }

      button {
        all: unset;
        background-color: azure;
        padding: 0 20px;
        border-radius: 5px;
      }

      .eraserBtn,
      .colorBtn {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        box-sizing: border-box;

        &.active {
          border: 5px solid #fff;
        }
      }

      .eraserBtn {
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <div class="contaner">
      <canvas id="canvas" width="800" height="500"></canvas>
      <div class="controller">
        <button class="clearBtn">清屏</button>
        <button class="screenshotBtn">截图</button>
        <div class="eraserBtn"></div>
      </div>
    </div>

    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
